<template>
    <div>
        <el-card class="box-card">
            <!-- 卡片头部的结构 -->
            <template #header>
                <div class="detail">挂号详情</div>
            </template>
            <!-- 展示身体的顶部 -->
            <div class="top">
                <!-- 左侧标签 -->
                <el-tag type="success">
                    <div class="tag">
                        <svg t="1689659722270" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2298" width="16" height="16">
                            <path d="M219.952 512.576l210.432 210.432-45.248 45.256-210.432-210.432z" p-id="2299"
                                fill="#1afa29"></path>
                            <path d="M799.672 262.264l45.256 45.256-460.464 460.464-45.256-45.256z" p-id="2300"
                                fill="#1afa29">
                            </path>
                        </svg>
                        <span>{{ orderInfo.param?.orderStatusString }}</span>
                    </div>
                </el-tag>
                <!-- 右侧的二维码 -->
                <div class="code-right">
                    <img src="../../../../assets/image/code_app.png" alt="">
                    <div>
                        <p>微信 关注 “北京114预约挂号”</p>
                        <p>“快速预约挂号”</p>
                    </div>
                </div>

            </div>
            <!-- 订单详情身体底部的结构 -->
            <div class="bottom">
                <div class="left">
                    <el-descriptions :column="1" border>
                        <el-descriptions-item label="就诊人信息" width="150px">{{ orderInfo.patientName }}</el-descriptions-item>
                        <el-descriptions-item label="就诊日期" width="150px">{{ orderInfo.quitTime }}</el-descriptions-item>
                        <el-descriptions-item label="就诊医院" width="150px">{{ orderInfo.hosname }}</el-descriptions-item>
                        <el-descriptions-item label="就诊科室" width="150px">{{ orderInfo.depname }}</el-descriptions-item>
                        <el-descriptions-item label="医生职称" width="150px">{{ orderInfo.title }}</el-descriptions-item>
                        <el-descriptions-item label="医事服务费" width="150px">{{ orderInfo.amount }}</el-descriptions-item>
                        <el-descriptions-item label="挂号单号" width="150px">{{ orderInfo.outTradeNo }}</el-descriptions-item>
                        <el-descriptions-item label="挂号时间" width="150px">{{ orderInfo.createTime }}</el-descriptions-item>
                    </el-descriptions>
                    <div class="btn" v-if="orderInfo.orderStatus == 0 || orderInfo.orderStatus == 1">
                        <el-popconfirm title="是否确定取消?" @confirm="cancel">
                            <template #reference>
                                <el-button>取消</el-button>
                            </template>
                        </el-popconfirm>

                        <el-button type="primary" size="default" v-if="orderInfo.orderStatus == 0"
                            @click="openDialog">支付</el-button>
                    </div>
                </div>
                <div class="right">
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>注意事项</span>
                            </div>
                        </template>
                        <div>
                            <p>1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本</p>
                            <p style="color: red;">2. [取号]就诊当天需在2023-06-1009:00前在医院取号，未取号视为爽约，该号不退不换;</p>
                            <p>3. [退号]在2023-06-09 15:30前可在线退号，逾期将不可办理退号退费;</p>
                            <p>4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号;</p>
                            <p>5.请注意北京市医保患者在住院期间不能使用社保-卡在门诊取号。</p>
                        </div>
                    </el-card>
                </div>
            </div>
        </el-card>
        <!-- 展示支付二维码的内容 -->
        <el-dialog v-model="dialogVisible" title="请扫描二维码" width="400px" @close="closeDialog">
            <div class="qrcode">
                <img :src="imgUrl" alt="">
                <p>请用微信扫一扫</p>
                <p>扫描二维码支付</p>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reqOrderInfo, reqCancelOrder, reQrcode,reqQueryPayState } from '@/api/user';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import type { OrderResponseData, orderInfo, Qrcode,PayResult } from '@/api/user/type';
// @ts-ignore
import { ElMessage } from 'element-plus';
// @ts-ignore
import QRCode from 'qrcode';
let $router = useRoute()
let orderInfo = ref<any>({})
// 控制对话框显示与隐藏的数据
let dialogVisible = ref<boolean>(false)
// 定义存储二维码图片路径
let imgUrl = ref<string>('')
// 储存定时器引用
let timer = ref<any>()
onMounted(() => {
    getOrderInfo()
})
// 获取订单详情的数据
const getOrderInfo = async () => {
    const result: OrderResponseData = await reqOrderInfo($router.query.orderId as string)

    if (result.code === 200) {
        orderInfo.value = result.data
    }
}
// 取消订单
const cancel = async () => {
    try {
        // 取消预约成功
        await reqCancelOrder($router.query.orderId as string)
        // 再次获取订单详情的数据
        getOrderInfo()
    } catch (error) {
        ElMessage({
            type: 'error',
            message: '取消预约失败'
        })
    }

}
// 打开对话框
const openDialog = async () => {
    dialogVisible.value = true
    // 支付二维码的信息
    const result:Qrcode = await reQrcode($router.query.orderId as string)
    // 根据服务器返回二维码信息生成的二维码图片
    imgUrl.value = await QRCode.toDataURL(result.data.codeUrl)
    // 询问服务器当前这笔交易的结果
    // 只要二维码出来：需要每隔几秒询问服务器是否支付成功
    timer.value = setInterval(async()=>{
        let result:PayResult = await reqQueryPayState($router.query.orderId as string)
        // 如果服务器返回的数据data：true，代表支付成功
        if(result.data){
            // 关闭对话框
            dialogVisible.value = false
            ElMessage({
                type:"success",
                message:"支付成功"
            })
            // 清除定时器
            clearInterval(timer.value)
        }
    },2000)
}

// 关闭对话框
const closeDialog = ()=>{
    clearInterval(timer.value)
}
</script>

<style scoped lang="scss">
.box-card {
    .detail {
        color: #7f7f7f;
        font-weight: bold;
    }

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;

        .tag {
            display: flex;
            justify-content: center;
            align-items: center;

            span {
                margin-left: 5px;
            }
        }

        .code-right {
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
                width: 40px;
                height: 40px;
            }

            p {
                font-size: 12px;
                line-height: 30px;
            }
        }

    }

    .bottom {
        display: flex;
        margin-top: 30px;

        .left {
            flex: 4;

            .btn {
                margin-left: 40px;
                margin-top: 20px;
            }
        }

        .right {
            flex: 6;
            margin-left: 20px;

            p {
                line-height: 30px;
            }
        }
    }
}

.qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
        height: 200px;
        width: 200px;
    }

    p {
        line-height: 30px;
    }
}
</style>